<template>
  <div class="welcome-header">
    <img v-if="userStore.communityImg" class="avatar" :src="userStore.communityImg" alt="头像" />
    <img v-else class="avatar" :src="avatar" alt="头像" />
    <div class="info">
      <div class="row">
        <span class="phone">{{ userStore.phonenumber }}</span>
        <span class="welcome">，欢迎回来！</span>
      </div>
      <div class="row">
        <el-tag type="primary" size="small">{{ userStore.communityName }}</el-tag>
        <span class="desc">欢迎使用小区业主投票助手管理系统，和你一样爱你家^_^</span>
      </div>
    </div>
    <div class="time-block">
      <div class="time">{{ time }}</div>
      <div class="date">{{ date }}</div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import useUserStore from '@/store/modules/user'
const userStore = useUserStore()
const props = defineProps({
  // phone: { type: String, default: userStore.phonenumber || '' },
  // community: { type: String, default:userStore.communityName },
  avatar: { type: String, default: '/src/assets/images/profile.jpg' }
})

const time = ref('')
const date = ref('')

function updateTime() {
  const now = new Date()
  time.value = now.toLocaleTimeString('zh-CN', { hour12: false })
  date.value = now.getFullYear() + '年' + String(now.getMonth() + 1).padStart(2, '0') + '月' + String(now.getDate()).padStart(2, '0') + '日'
}
onMounted(() => {
  updateTime()
  setInterval(updateTime, 1000)
})
</script>

<style scoped>
.welcome-header {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 8px;
  padding: 24px 32px;
  box-shadow: 0 2px 8px #f0f1f2;
  margin-bottom: 24px;
}
.avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 24px;
}
.info {
  flex: 1;
}
.row {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}
.phone {
  font-size: 20px;
  font-weight: bold;
}
.welcome {
  font-size: 18px;
  color: #333;
  margin-left: 8px;
}
.desc {
  margin-left: 12px;
  color: #888;
  font-size: 15px;
}
.time-block {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  background: #176bfa;
  color: #fff;
  border-radius: 8px;
  padding: 12px 24px;
  min-width: 120px;
}
.time {
  font-size: 32px;
  font-weight: bold;
  line-height: 1;
}
.date {
  font-size: 16px;
  margin-top: 4px;
}
</style> 